<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 设置删除提醒功能
            // 获取所有的超链接
            var allA = document.getElementsByTagName("a");
            // 给所有的超链接绑定单击响应事件
            for(var i = 0; i < allA.length; i++){
                allA[i].onclick = function(){
                    var tr = this.parentNode.parentNode;
                    // 获取要删除员工的名字
                    var name = tr.children[0].innerHTML;
                    // 删除之前提示
                    var flag = confirm("确认删除"+name+"吗?");
                    if(flag){
                        tr.parentNode.removeChild(tr);
                    }
                }
            }

            // 设置添加功能
            // 为提交按钮绑定单击响应事件
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                // 获取用户信息
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                
                // 创建tr
                var tr = document.createElement("tr");
                // 设置tr里面的内容
                tr.innerHTML = "<td>"+name+"</td>"+
                               "<td>"+email+"</td>"+
                               "<td>"+salary+"</td>"+
                               "<td><a href='#'>Delete</a></td>";
                // 获取tbody
                var tbody = document.getElementsByTagName("tbody")[0];
                // 将tr添加到tbody中
                tbody.appendChild(tr);

                // 设置删除提醒功能
                // 获取所有的超链接
                var allA = document.getElementsByTagName("a");
                // 给所有的超链接绑定单击响应事件
                for(var i = 0; i < allA.length; i++){
                    allA[i].onclick = function(){
                        var tr = this.parentNode.parentNode;
                        // 获取要删除员工的名字
                        var name = tr.children[0].innerHTML;
                        // 删除之前提示
                        var flag = confirm("确认删除"+name+"吗?");
                        if(flag){
                            tr.parentNode.removeChild(tr);
                        }
                    }
                }
            }
        };
    </script>
    <style>
        .table{
            text-align: center;
            margin: 100px auto;
        }
        table{
            margin: 0 auto;
            /* 合并边框 */
            width: 30%;
            border-collapse: collapse;
            border: 1px rgb(39, 38, 38) solid;
        }        
        td{
            border: 1px rgb(39, 38, 38) solid;
        }
        .setting{
            width: 300px;
            text-align: center;
            margin: 80px auto;
            border: 2px solid rgb(15, 15, 15);
        }
        .setting p{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="table">
        <table>
            <tr>
                <td>Name</td>
                <td>Email</td>
                <td>Salary</td>
                <td></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerry.com</td>
                <td>8000</td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Bob.com</td>
                <td>10000</td>
                <td><a href="#">Delete</a></td>
            </tr>
        </table>
    </div>
    <div class="setting">
        <p>添加新员工</p><br>
        name:<input type="text" id="name"><br>
        email:<input type="text" id="email"><br>
        salary:<input type="text" id="salary"><br>
        <button id="btn">Submit</button>
    </div>
</body>
</html>